<template>
  <view class="con">
    <view class="navbarBox">
      <view class="l">
        <u-icon name="arrow-left" @click="goBack" color="#000" size="24" style="margin-right: 20rpx"></u-icon>
        <view class="nickName">
          <image class="head" src="" mode="aspectFill" />
          <view>用户昵称</view>
        </view>
      </view>
      <view class="r">
        <view class="gzBox"><u-icon name="plus" color="#fff" size="14"></u-icon>关注</view>
        <view class="sc" @click="goBack">
          <u-icon name="star" size="24" color="#fff" v-if="!isSc"></u-icon>
          <u-icon name="star-fill" size="24" v-else c olor="#5CCBC1"></u-icon>
        </view>
      </view>
    </view>
    <view class="box">
      <view class="h">
        <image src="" mode="aspectFill" />
        <view class="name">
          <view class="s">用户昵称</view>
          <view class="x">42分钟前 北京</view>
        </view>
      </view>
      <view class="imgBox">
        <image :src="item" v-for="(item, index) in 6" @click.stop="TanPreviewImage([], index)" :key="index" mode="aspectFill" />
      </view>
      <view class="ctn"> 有喜欢宅在家里的小伙伴吗？ 喜欢不停捣鼓家的淘气鬼吗？ 你曾经把自己那方空间打造成什么风格？现在喜欢什么调性呢#变美分享</view>
    </view>
    <view class="box tl">
      <view class="tit"> 讨论 </view>
      <view class="plLits">
        <view class="plItem">
          <image src="" mode="aspectFill" />
          <view class="r">
            <view class="name"> nicheng </view>
            <view class="ctn1">评价内容是评价内容是评价内容是评价内容是评价内容是评价内容是 </view>
            <view class="sj">发布于昨天 16:45 广东</view>
          </view>
        </view>
      </view>
    </view>
    <view class="inputBox1" @click="showComments()">
      <view class="ip">想要说点什么</view>
    </view>
    <u-popup :show="show" mode="bottom" @close="close" @open="open" v-if="show">
      <view class="plInputBox">
        <view class="input" :style="{ width: plInfo ? '100%' : '80%' }">
          <u-textarea
            :height="60"
            :cursorSpacing="100"
            :focus="focus"
            border="none"
            :showConfirmBar="false"
            v-model="plInfo"
            placeholder="快发表你的评论吧"
            count
            autoHeight
            maxlength="300"
          ></u-textarea>
        </view>
        <view class="btnBox">
          <u-button type="primary" v-if="plInfo" size="small" @click="postComments">发布</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
import { goBack, TanPreviewImage } from "@/utils/commonFn";
import { ref } from "vue";
const isSc = ref(false);
const show = ref(false);
const focus = ref(false);
const plInfo = ref("");

const showComments = () => {
  show.value = true;
  focus.value = true;
};
const open = () => {
  show.value = true;
  console.log("open");
};
const close = () => {
  show.value = false;
  console.log("close");
};
const blur = () => {
  focus.value = false;
};
const postComments = async () => {
  close();
};
</script>
<style lang="less" scoped>
.con {
  background: linear-gradient(180deg, rgba(138, 244, 235, 0.24) 0%, rgba(92, 203, 193, 0.04) 53%, rgba(92, 203, 193, 0) 100%);
}
.navbarBox {
  padding: 0 20rpx;
  .l {
    display: flex;
    align-items: center;
    .nickName {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #333333;
      .head {
        width: 64rpx;
        height: 64rpx;
        background: #d8d3d9;
        border-radius: 50%;
        margin-right: 8rpx;
      }
    }
  }
  .r {
    display: flex;
    align-items: center;
    gap: 16rpx;
  }
  .sc {
    width: 60rpx;
    height: 60rpx;
    background: rgba(176, 176, 176, 0.5);
    z-index: 99;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gzBox {
    background: #81d8d0;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    display: flex;
    align-items: center;
    padding: 8rpx 16rpx;
    font-size: 28rpx;
    color: #ffffff;
    gap: 8rpx;
  }
}
.box {
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  padding: 32rpx;
  .h {
    display: flex;
    align-items: center;
    image {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      background: #3f454a;
      margin-right: 20rpx;
    }
    .s {
      font-size: 32rpx;
      color: #333333;
      line-height: 46rpx;
    }
    .x {
      font-size: 24rpx;
      color: #8a8a8d;
      line-height: 34rpx;
      margin-top: 8rpx;
    }
  }
  .imgBox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 38rpx;
    image {
      width: 224rpx;
      height: 224rpx;
      border-radius: 16rpx;
      margin-bottom: 6rpx;
      background: #996c4f;
    }
  }
  .ctn {
    font-size: 28rpx;
    color: #333333;
    margin-top: 40rpx;
  }
}
.tl {
  border-radius: 0rpx;
  margin-top: 20rpx;
  .tit {
    font-size: 36rpx;
    color: #333333;
    line-height: 52rpx;
    font-weight: bold;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 20rpx;
  }
  .plLits {
    .plItem {
      display: flex;
      margin-top: 40rpx;
      image {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        background: #a88076;
      }
      .r {
        width: calc(100% - 84rpx);
        .name {
          font-size: 28rpx;
          color: #8a8a8d;
        }
        .ctn1 {
          font-size: 26rpx;
          color: #333333;
          line-height: 42rpx;
          margin-top: 8rpx;
        }
        .sj {
          font-size: 24rpx;
          color: #8a8a8d;
          line-height: 34rpx;
          margin-top: 8rpx;
        }
      }
    }
  }
}
.inputBox1 {
  display: flex;
  justify-content: space-between;
  width: 100vw;
  position: absolute;
  left: 0rpx;
  bottom: 10rpx;
  z-index: 9999;
  .ip {
    width: 95%;
    padding: 20rpx 40rpx;
    background: #fff;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    font-size: 28rpx;
    color: #8a8a8d;
  }
}
.plInputBox {
  padding: 10rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .btnBox {
    width: 16%;
    margin-left: 10rpx;
  }
}
</style>
